<template>
  <el-card>
    <el-row>
      <el-col :span="12">
        <div>学生状态查询</div>
      </el-col>
      <el-col :span="6">
        <el-input
          v-model="statelistForm.name"
          style="width: 240px"
          placeholder="请输入学生姓名"
          @keyup.enter="getstatename"
          @clear="getstatelist"
        />
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="getstatename">查询</el-button>
        <el-button @click="onreset">重置</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-table
          :data="statelistData"
          style="width: 100%; overflow: auto; height: 60vh"
        >
          <el-table-column prop="id" label="ID" />
          <el-table-column prop="name" label="学生姓名" width="180" />
          <el-table-column prop="email" label="邮箱" width="180" />
          <el-table-column prop="num" label="宿舍号" />
          <el-table-column prop="sex" label="性别" :formatter="formatSex" />
          <el-table-column label="状态">
            <template #default="scope">
              <el-tag :type="stateTag(scope.row)">{{
                formatState(scope.row)
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="parentName" label="家长姓名" width="180" />
          <el-table-column
            prop="parentPhone"
            label="家长联系方式"
            width="180"
          />
          <el-table-column prop="teacherId" label="教师ID" />
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-pagination
          style="margin-top: 15px"
          v-model:current-page="searchParams.pageNum"
          v-model:page-size="searchParams.pageSize"
          :page-sizes="[3, 10, 20]"
          background
          layout="total, sizes, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup>
import { getstate, querystate } from "@/api/state";
import { ElMessage } from "element-plus";
import { ref, reactive, onMounted } from "vue";

const statelistData = ref([]);
const statelistForm = reactive({
  name: "",
});

const total = ref(0);
const searchParams = reactive({
  pageNum: 1,
  pageSize: 5,
});

const getstatelist = async () => {
  try {
    const res = await getstate(searchParams.pageNum, searchParams.pageSize);
    statelistData.value = res.data.rows;
    total.value = res.data.total;
  } catch (error) {
    ElMessage.error("获取状态列表失败：" + error.message);
  }
};

const handleSizeChange = (newSize) => {
  searchParams.pageSize = newSize;
  searchParams.pageNum = 1;
  getstatelist();
};

const handleCurrentChange = (newPage) => {
  searchParams.pageNum = newPage;
  getstatelist();
};

const formatSex = (row) => {
  return row.sex === "male" ? "男" : "女";
};

const formatState = (row) => {
  if (row.state === 0) {
    return "未请假";
  } else if (row.state === 1) {
    return "请假";
  } else {
    return "未知";
  }
};

const stateTag = (row) => {
  if (row.state === 0) {
    return "info";
  } else if (row.state === 1) {
    return "success";
  } else {
    return "danger";
  }
};

const getstatename = async () => {
  try {
    const res = await querystate(statelistForm.name);
    statelistData.value = res.data.rows;
    total.value = res.data.total;
  } catch (error) {
    ElMessage.error("查询失败：" + error.message);
  }
};

const onreset = () => {
  statelistForm.name = "";
  getstatelist();
};

onMounted(() => {
  getstatelist();
});
</script>

<style scoped></style>
